<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:target</title>
		<style>
			:target {
				color: #00FFFF;
				display: none;
			}

			:target+li {
				color: red;
			}

			.cs-more,
			[data-open=false] {
				display: none;
			}

			:target~[data-open=true] {
				display: none;
			}

			:target~.cs-more,
			:target~[data-open=false] {
				display: block;
			}

			/* 默认选项卡样式 */
			.cs-tab-li {
				display: inline-block;
				background-color: #f0f0f0;
				color: #333;
				padding: 5px 10px;
			}

			/* 选中后的按钮样式 */
			.cs-tab-2:not(:target)+ :not(:target)~.cs-tab .cs-tab-li:first-child,
			.cs-tab-2:target~.cs-tab .cs-tab-li:nth-of-type(2),
			.cs-tab-3:target~.cs-tab .cs-tab-li:nth-of-type(3) {
				background-color: deepskyblue;
				color: #fff;
			}
			/* 默认面板 */
			.cs-panel-li {
				display: none;
				padding: 20px;
				border: 1px solid #ccc;
			}		
			/* 选中的面板 */
			.cs-tab-2:not(:target) + :not(:target)~.cs-panel .cs-panel-li:first-child,
			.cs-tab-2:target~.cs-panel .cs-panel-li:nth-of-type(2),
			.cs-tab-3:target~.cs-panel .cs-panel-li:nth-of-type(3) {
				display: block;
			}
		</style>
	</head>
	<body>
		<h2>target，匹配url中锚点定位的元素</h2>
		<h4>display:none,:target依然响应</h4>
		<ul>
			<li id="li1">倒霉催的</li>
			<li id="li2">凸棱皮的</li>
			<li id="li3">嗷嗷的</li>
		</ul>
		<hr>
		<h4>应用：查看更多</h4>
		<div>
			内容内容
			<div id="articleMore" hidden>永远隐藏的锚点</div>
			<a href="#articleMore" data-open="true">查看更多</a>
			<div class="cs-more">更多更多更多</div>
			<a href="##" data-open="false">收起</a>
		</div>
		<h4>应用：选项卡</h4>
		<div class="cs-tab-x">
			<i id="tab-2" hidden class="cs-tab-2"></i>
			<i id="tab-3" hidden class="cs-tab-3"></i>
			<div class="cs-tab">
				<a href="#tab-1" class="cs-tab-li">选项卡-1</a>
				<a href="#tab-2" class="cs-tab-li">选项卡-2</a>
				<a href="#tab-3" class="cs-tab-li">选项卡-3</a>
			</div>
			<div class="cs-panel">
				<div class="cs-panel-li">111</div>
				<div class="cs-panel-li">222</div>
				<div class="cs-panel-li">333</div>
			</div>
		</div>

		<script>
			location.hash = "li1"
		</script>
	</body>
</html>
